<script setup>
  import { reactive, ref } from "vue";
  import { User, Lock } from "@element-plus/icons-vue";
  import {ElMessage} from "element-plus";
  import router from "@/router";
  import {loginAPI} from '@/apis/login'
  import {useUserStore} from "@/stores/user";

  const data = reactive({
    form: {
      username:'',
      password:'',
    },
    rules: {
      username: [
        { required: true, message: '请输入账号', trigger: 'blur' },
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
      ],
    }
  })

  const formRef = ref()
  const userStore=useUserStore()
  // 点击登录按钮的时候会触发这个方法
  const login = () => {
    formRef.value.validate((valid => {
      if (valid) {
        loginAPI(data.form).then(res=>{
          if(res.code==='200'){
            //保存登录信息到本地
            userStore.setUserInfo(res.data)
            userStore.setToken('testToken')
            //重定向到首页
            router.replace('/tianyanCommunity')
          }
          ElMessage({
            type:res.code==='200'?'success':'error',
            message:res.code==='200'?'登陆成功':res.msg
          })
        })
      }
    })).catch(error => {
      console.error(error)
    })
  }

</script>

<template>
  <div class="login-container">
    <div class="login-box">
      <div class="logo-area">
        <img src="@/assets/imgs/logo.png" alt="logo" class="logo">
        <div class="title">欢迎登录天眼寻人</div>
      </div>
      
      <el-form :model="data.form" ref="formRef" :rules="data.rules" class="login-form">
        <el-form-item prop="username">
          <el-input 
            :prefix-icon="User" 
            size="large" 
            v-model="data.form.username" 
            placeholder="请输入账号"
            class="custom-input" 
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input 
            :prefix-icon="Lock" 
            size="large" 
            v-model="data.form.password" 
            placeholder="请输入密码" 
            show-password
            class="custom-input"
          />
        </el-form-item>
        <el-form-item>
          <el-button 
            size="large" 
            type="primary" 
            class="login-button" 
            @click="login"
          >登 录</el-button>
        </el-form-item>
      </el-form>
      
      <div class="register-link">
        还没有账号？<router-link to="/register" class="link">立即注册</router-link>
      </div>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(125deg, #7f7fd5, #86a8e7, #91eae4);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}

.login-box {
  width: 400px;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease;
}

.login-box:hover {
  transform: translateY(-5px);
}

.logo-area {
  text-align: center;
  margin-bottom: 30px;
}

.logo {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
}

.title {
  font-size: 24px;
  font-weight: 600;
  color: #1450aa;
  margin-bottom: 30px;
}

.login-form :deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.login-form :deep(.el-input__wrapper:hover) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.login-button {
  width: 100%;
  border-radius: 8px;
  font-weight: 600;
  background: linear-gradient(to right, #1450aa, #4481eb);
  border: none;
  height: 44px;
  transition: transform 0.2s ease;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(20, 80, 170, 0.2);
}

.register-link {
  text-align: center;
  margin-top: 20px;
  color: #606266;
}

.link {
  color: #1450aa;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.link:hover {
  color: #4481eb;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
</style>